<template>
  <BasicLayout title="订单详情">
    <template slot="content">
      <Detail :lists="people" title="订单信息" />
      <ClauseCheckbox clause="陪诊员服务条款" />
    </template>
    <div class="confirm-wrapper" slot="footer">
      <div class="btn-wrapper">
        <el-button class="refuse-btn" type="danger" round @click="refuse">
          拒绝接单
        </el-button>
        <el-button class="confirm-btn" type="primary" round @click="confirm">
          确认接单
        </el-button>
      </div>
    </div>
  </BasicLayout>
</template>

<script>
import BasicLayout from "@/components/BasicLayout/index.vue";
import Detail from "@/components/Detail/index.vue";
import ClauseCheckbox from "@/components/ClauseCheckbox/index.vue";
import { people } from "@/constants/common/people";
export default {
  components: {
    BasicLayout,
    Detail,
    ClauseCheckbox,
  },
  methods: {
    refuse() {
      console.log("拒绝接单");
    },
    confirm() {
      this.$message({
        message: "确认订单成功",
        type: "success",
      });
      this.$router.replace({ name: "OrderStatus", query: { type: "staff" } });
    },
  },
  data() {
    return { people };
  },
};
</script>

<style scoped>
.confirm-wrapper {
  width: 90%;
  margin: 0 auto;
}
.btn-wrapper {
  display: flex;
}
.confirm-btn {
  flex: 1;
}
.refuse-btn {
  flex-basis: 100px;
}
</style>
